<template>
	<view class="content">
		<view class="content-item">
			<view class="title">显示农历、月份背景等；收缩显示一周的日期；动态添加和修改标记；</view>
			<lunc-calendar ref="calendar" :showLunar="true" :showMonthBg="true" :showShrink="true" :signList="signList"
				@dayChange="dayChange" weekType="星期" @monthChange="monthChange" @shrinkClick="shrinkClick">
			</lunc-calendar>
			<view class="operation">
				<view class="button" @click="addSign">新增标记</view>
				<view class="button" @click="deleteSign">删除标记</view>
			</view>
		</view>
		<view class="content-item">
			<view class="title">日历收缩</view>
			<lunc-calendar :showShrink="true" shrinkState="week" :showChangeBtn="false"></lunc-calendar>
		</view>
		<view class="content-item">
			<view class="title">默认日历</view>
			<lunc-calendar weekType=""></lunc-calendar>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signList: [{date: "2023-06-25",title: "生日",info: "张三生日"},
					{date: "2023-06-19",title: "朋友聚会"}, 
					{date: "2023-07-22",title: "纪念日"}, 
					{date: "2023-04-11",title: "聚会"}, 
					{date: "2023-07-23",title: "郊游"}, 
					{date: "2023-08-19",title: "游玩"}],
				defaultDate: new Date(2023,9,20)
			}
		},
		methods: {
			dayChange(dayInfo) { // 点击日期
				console.log("点击日期", JSON.parse(JSON.stringify(dayInfo)));
			},
			monthChange(monthInfo) { // 切换月份
				console.log("切换月份", JSON.parse(JSON.stringify(monthInfo)));
			},
			shrinkClick(type) {
				console.log("当前状态", type);
			},

			addSign() { // 添加标记
				let addList = [{date: "2023-06-28",title: "休息"}, 
				{date: "2023-06-01",title: "上班"}];
				// 调用 addSignList 方法，传入需要添加的标记数组
				this.$refs.calendar.addSignList(addList);
			},
			deleteSign() { // 删除标记
				let deleteList = [{date: "2023-06-01",title: "上班"}];
				// 调用 deleteSignList 方法，传入需要删除的标记数组
				this.$refs.calendar.deleteSignList(deleteList);
			},
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #409EFF;
		margin-bottom: 80rpx;

		.content-item {
			padding: 30rpx;
			border-top: 2px solid #FFF;

			.title {
				font-size: 28rpx;
				line-height: 32rpx;
				padding: 0 0 18rpx;
				color: #FFF;
			}

			.lunc-calendar {
				border-radius: 20rpx;
			}

			.operation {
				display: flex;
				flex-direction: row;
				margin-top: 30rpx;

				.button {
					color: #FFF;
					text-decoration: underline;
					margin-right: 30rpx;
				}
			}
		}

		.content-item:first-child {
			border-top: none;
		}
	}
</style>
